<template>
    <div class="exam" :style="{background: backgroundColor, color: fontColor}">
        <div class="exam-inner">
            <h3>{{ record.paperTitle }}</h3>
            <div class="qst_single" v-if="paper.qst_single">
                <h4>一、 单项选择题</h4>
                <dl
                    class="test-item qst-stem"
                    v-for="(test, index) in paper.qst_single"
                    :key="test.id"
                    :id="'single_' + (index + 1)"
                >
                    <dt class="inline clearfix">
                        <div class="pull-left">{{index + 1}}.&nbsp;</div>
                        <div class="pull-left text" v-html="test.qstStem"></div>
                        <div class="pull-left">({{test.score}}分)</div>
                    </dt>
                    <dd>
                        <div v-for="j in 4" :key="j">
                            <div class="inline option clearfix" v-if="test['opt' + j]">
                                <div class="label pull-left">
                                    <label class="radio">
                                        <input
                                            :name="'single_' + index"
                                            type="radio"
                                            :value="j"
                                            v-model="studentAnswer.qst_single[index][1]"
                                            disabled
                                        >
                                        {{answerLabels[j - 1]}}&nbsp;
                                    </label>
                                </div>
                                <div class="text pull-left" v-html="test['opt' + j]"></div>
                            </div>
                        </div>
                        <div class="answer">
                            正确答案：
                            <span
                                :class="{'mistake': studentAnswer.qst_single[index][1] != test.answer }"
                            >{{answerLabels[test.answer - 1]}}</span>
                        </div>
                        <div class="clearfix">
                            <div class="pull-left">解析:</div>
                            <div
                                class="pull-left text"
                                v-html="test.analysis ? test.analysis : '无' "
                            ></div>
                        </div>
                    </dd>
                </dl>
            </div>
            <div class="qst_more" v-if="paper.qst_more">
                <h4>二、多项选择题</h4>
                <dl
                    class="test-item qst-stem"
                    v-for="(test, index) in paper.qst_more"
                    :key="'more_' + test.id"
                    :id="'more_' + (index + 1)"
                >
                    <dt class="inline clearfix">
                        <div class="pull-left">{{ paper.qst_single.length + index + 1}}.&nbsp;</div>
                        <div class="pull-left text" v-html="test.qstStem"></div>
                        <div class="pull-left">({{test.score}}分)</div>
                    </dt>
                    <dd>
                        <div v-for="j in 6" :key="j">
                            <div class="inline option clearfix" v-if="test['opt' + j]">
                                <div class="label pull-left">{{answerLabels[j - 1]}}.&nbsp;</div>
                                <div class="text pull-left" v-html="test['opt' + j]"></div>
                            </div>
                        </div>

                        <span v-for="j in 6" :key="'more_checkbox' + j">
                            <label class="checkbox" v-if="test['opt' + j]">
                                <input
                                    disabled
                                    type="checkbox"
                                    :name="'more_' + index"
                                    :value="j + ''"
                                    v-model="studentAnswer.qst_more[test.id][j - 1]"
                                >
                                {{answerLabels[j - 1]}}&nbsp;
                            </label>
                        </span>
                        <div class="answer">
                            正确答案：
                            <span
                                :class="{'mistake': record.content.qst_more[index][1] != test.answer }"
                            >{{realMoreAnswer[test.id]}}</span>
                        </div>
                        <div class="clearfix">
                            <div class="pull-left">解析:</div>
                            <div
                                class="pull-left text"
                                v-html="test.analysis ? test.analysis : '无' "
                            ></div>
                        </div>
                    </dd>
                </dl>
            </div>
            <div class="answer-card">
                <div class="title">答题卡</div>
                <div class="content">
                    <div v-if="paper.qst_single">
                        <h5>单选题</h5>
                        <div class="num">
                            <a
                                :class="{active: studentAnswer.qst_single[i - 1][1]}"
                                v-for="i in paper.qst_single.length "
                                :key="i"
                                :href="'#single_' + i"
                            >{{i}}</a>
                        </div>
                    </div>
                    <div v-if="paper.qst_more">
                        <h5>多选题</h5>
                        <div class="num">
                            <a
                                v-for="(test, index) in paper.qst_more"
                                :key="index"
                                :class="{active: isMoreTestSelected(studentAnswer.qst_more[test.id])}"
                                :href="'#more_' + (index + 1)"
                            >{{ paper.qst_single.length + (index + 1) }}</a>
                        </div>
                    </div>
                </div>背景颜色
                <el-color-picker v-model="backgroundColor" show-alpha></el-color-picker>字体颜色
                <el-color-picker v-model="fontColor" show-alpha></el-color-picker>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name: "exam-anslysis",
    data() {
        return {
            record: [],
            paper: [],
            answerLabels: ["A", "B", "C", "D", "E", "F"],
            backgroundColor: "#fff",
            fontColor: "#4f4f4f",
            studentAnswer: [],
            realMoreAnswer: {} // 多选题真实答案
        };
    },
    created() {
        if (!this.$route.query.recordId) {
            this.$router.go(-1);
        } else {
            this.$http("/api/exam/getRecordList", {
                params: { recordId: this.$route.query.recordId }
            }).then(({ data }) => {
                if (data.code === 0) {
                    this.record = data.data[0];
                    console.log("this.record", this.record);
                    if (this.record.analysisVisible !== 0) {
                        this.record.content = JSON.parse(this.record.content);
                        this.getPaperContent();
                        this.studentAnswer = JSON.parse(
                            JSON.stringify(this.record.content)
                        );
                        this.studentAnswer.qst_more = this.convertMoreAnswerNumToArr(
                            this.studentAnswer.qst_more
                        );

                        console.log("this.studentAnswer", this.studentAnswer);
                        console.log("this.realMoreAnswer", this.realMoreAnswer);
                    }
                }
            });
        }
    },
    methods: {
         // 多选题是否选中
        isMoreTestSelected(arr) {
            let res = false;
            arr.map(item => {
                if (item) {
                    res = true;
                    return true;
                }
            });
            return res;
        },
        // 把多选题的 数字转换为字母字符串
        convertMoreAnswerNumToUpperCaseStr(moreArr) {
            // res : {id: 'A, B, C'}
            // res : {id: [0, 1, 2, 3]}
            let res = {};
            moreArr.map(test => {
                let _rStr = "";
                let str = test.answer.toString(2);
                str = str.slice(1);
                let arr = str.split("").map(Number);
                arr.map((num, i) => {
                    if (num === 1) {
                        _rStr += this.answerLabels[i] + " ";
                    }
                });
                res[test.id] = _rStr;
            });
            return res;
        },
        // 把多选题的 数字转换为数组
        convertMoreAnswerNumToArr(moreArr) {
            console.log('moreArr', moreArr)
            let res = {};
            moreArr.map(item => {
                let str = item[1].toString(2);
                console.log('str', str)
                str = str.slice(0);
                res[item[0]] = str.split("").map(Number).slice(1);
            });
            console.log('res', res)
            return res;
        },
        getPaperContent() {
            console.log("this.record.content", this.record.content);
            let content = {};
            for (let type in this.record.content) {
                content[type] = [];
                this.record.content[type].map(item => {
                    content[type].push(item[0]);
                });
            }
            this.$http("api/paper/getFixedTest", {
                params: {
                    content
                }
            }).then(({ data }) => {
                // console.log("data", data);
                if (data.code === 0) {
                    this.paper = data.data;
                    console.log("this.paper", this.paper);
                    this.realMoreAnswer = this.convertMoreAnswerNumToUpperCaseStr(
                        this.paper.qst_more
                    );
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>

.answer {
    span {
        color: blue;
    }
    .mistake {
        color: red;
    }
}
.answer-card {
    position: fixed;
    right: 5%;
    top: 33%;
    width: 18%;
    min-width: 210px;
    max-width: 310px;
    border: 1px solid #bbb;
    padding: 10px 5px;
    background: rgba($color: #fff, $alpha: 0.5);
    white-space: nowrap;
    z-index: 999;
    .time {
        text-align: center;
    }
    .title {
        // background: #ccc;
        text-align: center;
    }
    .content {
        padding: 4px 5px;
        .num {
            display: inline-block;
            text-align: center;
        }
        a {
            float: left;
            width: 29px;
            height: 20px;
            margin: 2px;
            // margin-right: 5px;

            // margin-bottom: 5px;
            // padding: 1px 10px;
            border: 1px solid #999;
            &:hover {
                text-decoration: none;
            }
            &.active {
                background: #bbb;
            }
        }
    }
}
</style>
